home

Understanding Event Propagation

The concept describes how events are propagated from the root element to the target element.

Event Bubbling

Bubbling is a concept that allows us to listen to events on the parent element because they are wrapped around the child we are targeting. It propagates(bubbles) up from the target element until it reaches the root element.

Event Capturing

Capturing is a concept thats allows us to listen to events running in the opposite direction of bubbling. It allows us to listen from the top, going down the DOM hierarchy.

Stopping Propagation

You can stop an event from bubbling or capturing by calling event.stopPropagation(). You will only trigger an event on the target element.